<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item v-if="state === 2" :label-position="labelPosition" label="客户电话后四位" prop="telLastFour" label-width="250">
				<u-input type="text" :border="border" placeholder="请输入电话后四位" v-model="model.telLastFour" />
			</u-form-item>
			<u-form-item v-if="state === 2" :label-position="labelPosition" label="上传货物图片" prop="beginPic" label-width="200">
				<u-upload width="160" height="160"
					:before-remove="beforeRemove"
					ref="uUpload"
					:custom-btn="false" 
					:show-upload-list="true" 
					:action="uploadFile.url" 
					:formData="uploadFile.formData" 
					:auto-upload="true" 
					:file-list="fileList"
					:show-progress="true"
					:deletable="true"
					:max-count="uploadFile.maxCount"
					@on-list-change="onListChange"
					@on-success="OnSuccess"
					/>
			</u-form-item>
			<u-form-item v-if="state === 3" :label-position="labelPosition" label="上传货物图片" prop="completePic" label-width="200">
				<u-upload width="160" height="160"
					:before-remove="beforeRemove"
					ref="uUpload"
					:custom-btn="false" 
					:show-upload-list="true" 
					:action="uploadFile.url" 
					:formData="uploadFile.formData" 
					:auto-upload="true" 
					:file-list="fileList"
					:show-progress="true"
					:deletable="true"
					:max-count="uploadFile.maxCount"
					@on-list-change="onListChange"
					@on-success="OnSuccess"
					/>
			</u-form-item>
		</u-form>
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
	import {
		policy
	} from '../../../api/uploadFile/upload.js'
	export default {
		props:{
			state: {
				type: Number,
				default() {
					return 0
				}
			}
		},
		data() {
			let that = this;
			return {
				fileList: [],
				lists: [], // 组件内部的文件列表,
				model: {
					telLastFour: '',
					beginPic: '',
					completePic:''
				},
				border: false,
				labelPosition: 'left',
				errorType: ['message'],
				uploadFile: {
					url: '', //后端地址
					maxCount: 1, // 最大上传数
					formData: {}, // 携带的参数
					name: '' // 上传的文件字段名
				},
				rules: {
					telLastFour: [{
						required: true,
						message: '请填写电话信息',
						trigger: ['change','blur'],
					},{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.code(value, 4);
							},
							message: '电话号码后4位',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						},],
				}
			}
		},
		created() {
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules);
			this.getPolicy();
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},
		methods: {
			// 上传图片之前的钩子函数
			beforeUpload() {},
			// 上传成功时返回
			OnSuccess() {
				if(this.state === 2) {
					this.model.beginPic = this.upload.formData.host + "/" + this.upload.formData.key
				}else if (this.state ===3) {
					this.model.completePic = this.upload.formData.host + "/" + this.upload.formData.key
				}	
			},
			getPolicy() {
				let _self = this;
				policy().then(response => {
					_self.uploadFile.url = response.host
					_self.uploadFile.formData.policy = response.policy;
					_self.uploadFile.formData.signature = response.signature;
					_self.uploadFile.formData.ossaccessKeyId = response.accessid;
					_self.uploadFile.formData.key = response.dir + response.key;
					_self.uploadFile.formData.dir = response.dir;
					_self.uploadFile.formData.host = response.host;
				})
			},
			onListChange(lists) {
				// console.log('onListChange', lists);
				this.lists = lists;
			},
			beforeRemove(index, lists) {
				return true;
			},
			// 这里无法判断是保存还是更新操作，所以交给父组件去判断
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$emit('submit', this.model)
						this.model = {}
					} else {
						//console.log(this.$refs.upload.beforeUpload())
						uni.showToast({
							title: '验证失败，请查看是否输入正确信息',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
		}
	}
</script>
	
<style lang="scss">
	.wrap {
		padding: 30rpx;
		z-index: -10;
	}
</style>